var defaultPageSize = 4;
var store;
var storeParams = { params: { start: 0 } };

Ext.onReady(function(){

    // create the Data Store
    store = new Ext.data.Store({
        // load using script tags for cross domain, if the data in on the same domain as
        // this page, an HttpProxy would be better
        proxy: new Ext.ux.data.DWRProxy({
            dwrFunction: EventManager.findAllEvent, /* i create a interface with this method and all class that has the method that will invoke dinamic will implement this interface */
            listeners: {
                'beforeload': function(dataProxy, params) { 
                    params["size"] = defaultPageSize;
                    params["filter"] = { };
                    
// who don't know this $j is jquery
                    if( $j("#car_description").get(0) != null && jQuery.trim( $j("#car_description").val() ) != "" )
                        params["filter"].description = $j("#car_description").val();
                }
            }
        }),

        // create reader that reads the Topic records
        reader: new Ext.data.JsonReader({
            root: 'obj',
            id: 'id',
            totalProperty: 'size',
            fields: [
                {name: 'id'},
                {name: 'description'},
                {name: 'manufacturer.description'} /*I use like this way, because i use hibernate to order by, and inside a car has a manufacturer object with description attr, then i send to server side the name like i will use.*/
            ]
        }),

        // turn on remote sorting
        remoteSort: true
    });
    store.setDefaultSort('description', 'asc');

    // the column model has information about grid columns
    // dataIndex maps the column to the specific data field in
    // the data store
    var cm = new Ext.grid.ColumnModel([{
           header: "ID",
           dataIndex: 'id',
           width: 50
        },{    
           header: "Description",
           dataIndex: 'description',
           width: 350
        },{
           header: "Manufacturer",
           dataIndex: 'manufacturer.description',
           width: 350
        }]);

    // by default columns are sortable
    cm.defaultSortable = true;

    var grid = new Ext.grid.GridPanel({
        el:'gridCar',
        width:754,
        height:300,
        title:'Cars',
        store: store,
        cm: cm,
        trackMouseOver:false,
        sm: new Ext.grid.RowSelectionModel({selectRow:Ext.emptyFn}),
        loadMask: true,
        bbar: new Ext.PagingToolbar({
            pageSize: defaultPageSize,
            store: store,
            displayInfo: true,
            displayMsg: 'Displaying topics {0} - {1} of {2}',
            emptyMsg: "No topics to display",
        })
    });

    // render it
    grid.render();

    // trigger the data store load
    store.load(storeParams);
});